<template>
  <div>
    <yj-dialog
      :modal="dialog.modal"
      :width="dialog.width"
      :title="dialog.title"
      :dialogVisible="dialog.visible"
      @close="closeDialog"
    >
      <template slot="dialog-content">
        <el-form
          :model="form"
          :rules="rules"
          ref="userForm"
          size="mini"
          label-width="100px"
        >
          <el-form-item label="快递单号" :rule="rules" prop="expressNo">
            <el-input v-model="form.expressNo"></el-input>
          </el-form-item>

          <el-form-item label="快递公司" prop="expressCompany">
            <el-input type="text" v-model="form.expressCompany"></el-input>
          </el-form-item>

          <el-form-item label="物流状态" prop="expressStatus">
            <el-select
              style="width: 100%"
              filterable
              v-model="form.expressStatus"
              placeholder="请选择商品类型"
            >
              <el-option key="-1" label="无" value=""> </el-option>
              <el-option
                v-for="item in expressStatus"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>

        <div slot="footer" style="text-align: center" class="dialog-footer">
          <el-button size="mini" @click="cancelDialogBtn('userForm')">取 消 </el-button>
          <el-button size="mini" type="primary" @click="saveDialogBtn('userForm')"
            >确 定
          </el-button>
        </div>
      </template>
    </yj-dialog>
    <table-frame
      ref="frame"
      :getDataUrl="prop.getDataUrl"
      :removeUrl="prop.removeUrl"
      :searchShow="prop.searchShow"
      :operateShow="prop.operateShow"
      :location="prop.location"
      :searchModel="prop.searchModel"
      :reloadTable="prop.reloadTable"
      :colunmsCount="prop.colunmsCount"
      :showDelBtn="prop.showDelBtn"
      :delBtnPermission="prop.delBtnPermission"
      :that="prop.that"
    >
      <template slot="top_operate" slot-scope="currentRow"> </template>

      <template slot="columns">
        <auth :code="permission.progress">
          <template slot="auth">
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-timeline>
                  <template v-for="(activity, index) in expressProgress.progress">
                    <el-timeline-item
                      v-if="index == 0"
                      :key="index"
                      type="primary"
                      :timestamp="activity.createTime"
                    >
                      {{ activity.word }}
                    </el-timeline-item>

                    <el-timeline-item
                      v-else-if="index == 1"
                      :key="index"
                      :type="activity.isCurrentStatus ? 'success' : 'primary'"
                      :timestamp="activity.createTime"
                    >
                      {{ activity.word }}
                    </el-timeline-item>

                    <el-timeline-item
                      v-else
                      :key="index"
                      :type="
                        activity.isCurrentStatus
                          ? activity.status == 'CANCEL'
                            ? 'danger'
                            : 'success'
                          : ''
                      "
                      :timestamp="activity.createTime"
                    >
                      {{ activity.word }}
                    </el-timeline-item>
                  </template>
                </el-timeline>

                <el-form label-position="left" inline class="demo-table-expand">
                  <el-form-item label="物流单号">
                    <span>{{ props.row.expressNo }}</span>
                    <span>{{ props.row.expressCompany }}</span>
                  </el-form-item>
                  <el-form-item label="收货人">
                    <span>{{ props.row.address.name }}</span>
                    <span>{{ props.row.address.phone }}</span>
                  </el-form-item>
                  <el-form-item label="收件地址">
                    <span>{{ props.row.address.province }}</span>
                    <span>{{ props.row.address.city }}</span>
                    <span>{{ props.row.address.district }}</span>
                    <span>{{ props.row.address.address }}</span>
                  </el-form-item>
                </el-form>
                <div></div>
              </template>
            </el-table-column>
          </template>
        </auth>
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="userCode"
          label="用户编号"
        ></el-table-column>
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="goodName"
          label="商品名称"
        ></el-table-column>
        <el-table-column align="center" prop="typeName" label="类型"></el-table-column>
        <el-table-column align="center" prop="price" label="原价"></el-table-column>
        <el-table-column
          align="center"
          prop="integralPrice"
          label="积分价"
        ></el-table-column>
        <el-table-column align="center" prop="amount" label="花费积分"></el-table-column>
        <el-table-column align="center" prop="num" label="兑换数量"></el-table-column>
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="sendTime"
          label="发货时间"
        ></el-table-column>
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="signedTime"
          label="签收时间"
        ></el-table-column>
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="expressNo"
          label="快递单号"
        ></el-table-column>
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="expressCompany"
          label="物流公司"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="expressStatus"
          label="物流状态"
        ></el-table-column>
        <el-table-column align="center" prop="mainImgUrl" label="商品图片">
          <template slot-scope="scope">
            <el-image
              fit="cover"
              style="width: 50px; height: 50px"
              :preview-src-list="[scope.row.mainImgUrl]"
              :src="scope.row.mainImgUrl"
            />
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="content"
          label="商品描述"
        ></el-table-column>
        <el-table-column
          prop="createTime"
          sortable
          width="150"
          align="center"
          label="创建时间"
        ></el-table-column>
        <el-table-column
          prop="updateTime"
          sortable
          align="center"
          width="150"
          label="更新时间"
        ></el-table-column>
      </template>
      <template slot="operate">
        <el-table-column fixed="right" align="center" label="操作" width="200">
          <template slot-scope="scope">
            <auth :code="permission.update">
              <template slot="auth">
                <el-button
                  v-if="scope.row.expressStatus != '取消'"
                  class="operate-btn"
                  icon="el-icon-edit"
                  type="text"
                  @click="showExpressNo(scope.row)"
                  size="mini"
                  slot="auth"
                  >填写物流
                </el-button>
              </template>
            </auth>
          </template>
        </el-table-column>
      </template>
    </table-frame>
  </div>
</template>
<script>
let _this = {};
import searchModel from "./Search.vue";
import utils from "../../../../utils/CommonUtils.js";
import formUtils from "../../../../utils/form.js";
import { Loading } from "element-ui";

export default {
  data() {
    return {
      dialog: {
        width: "40%",
        title: "新增/修改",
        visible: false,
        modal: true,
      },
      prop: {
        searchShow: true,
        operateShow: true,
        location: " 系统设置 / 岗位管理",
        getDataUrl: "/goods/goodsChangeRecordsPageList",
        removeUrl: "",
        searchModel: searchModel,
        reloadTable: false,
        showDelBtn: false,
        isPage: true,
        delBtnPermission: "",
        that: this,
      },
      form: { userGoodsNo: "", expressNo: "", expressCompany: "", expressStatus: "" },
      formStrInit: "",
      rules: {
        expressNo: [{ required: true, message: "请输入快递单号", trigger: "blur" }],
        expressCompany: [{ required: true, message: "请输入快递公司", trigger: "blur" }],
        remark: [{ required: false }],
      },
      CONST: {
        status: { ON: "ON", OFF: "OFF" },
      },
      permission: {
        update: "goods:record:sendGoods",
        progress: "goods:record:progress",
      },
      expressStatus: [],

      URL: {
        sendGoods: "/goods/sendGoods",
        getProgress: "/goods/getProgress/?",
        getExpressStatus: "/goods/getExpressStatus",
      },
      // 物流状态
      expressProgress: {},
    };
  },
  created() {
    formUtils.initFormStr(this, "formStrInit", this.form);
    this.initType();
  },
  methods: {
    initType() {
      this.$get(this.URL.getExpressStatus, {}).then((res) => {
        if (res.R) {
          this.expressStatus = res.data;
        }
      });
    },

    // 更新快递单号
    showExpressNo(row) {
      this.dialog.visible = true;
      this.setDataToForm(row);
    },

    // 取消
    cancelDialogBtn(userForm) {
      this.dialog.visible = false;
      this.setDataToForm(null);
      this.$refs[userForm].resetFields();
    },
    closeDialog() {
      this.dialog.visible = false;
      this.$emit("closeModal", false);
    },
    saveDialogBtn(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          formUtils.put(this, this.URL.sendGoods, this.form, true, (res) => {
            this.dialog.visible = false;
          });
        }
      });
    },

    reqResult(res) {
      this.dialog.visible = false;
      this.setDataToForm(null);
    },
    setDataToForm(row) {
      formUtils.setDataToForm(this, "form", row, [], JSON.parse(this.formStrInit));
      if (row != null) {
        this.expressStatus.forEach((e) => {
          if (e.name == row.expressStatus) {
            this.form.expressStatus = e.value;
          }
        });
      }
    },
    reloadTable() {
      _this = this;
      this.prop.reloadTable = true;
      setTimeout(() => {
        _this.prop.reloadTable = false;
      }, 1000);
    },
    onChangeFile(file, list) {
      if (file.size > this.$globConfig.fileMaxSize) {
        // 文件大于5m
        this.$warning("文件不能大于" + this.$globConfig.fileMaxSize / 1024 / 1024 + "MB");
        return;
      }
      utils.fileToBase64(file).then((res) => {
        this.form.mainImgUrl = res;
      });
    },
    removeFile() {
      this.form.mainImgUrl = "";
    },
    monitorRowExpandChange(res) {
      let that = this;
      if (res.expand) {
        let loading = Loading.service({});
        that
          .$get(that.URL.getProgress.replace("?", res.row.userGoodsNo), {}, false)
          .then((r) => {
            loading.close();
            that.expressProgress = r.data;
          });
      }
    },
  },
};
</script>
<style></style>
<style scoped>
.operate-btn {
  margin: 0 5px;
}

.delele-img {
  font-size: 14px;
  width: 178px;
  cursor: pointer;
  text-align: center;
}

.avatar-uploader >>> .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand >>> label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand >>> .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 80%;
}
</style>
